ما هي الرسوم المتحركة شرح CSS Animations لكيفية تحريك العناصر في مواقع الويب
في عصر الإنترنت الحديث أصبحت تجربة المستخدم عنصرا أساسيا في تصميم مواقع الويب من بين الأدوات التي تُستخدم لتحسين التفاعل وجذب انتباه الزوار تأتي الرسوم المتحركة باستخدام CSS كأحد الحلول الأكثر فعالية وسهولة فهي تتيح للمصممين والمطورين تحريك العناصر وإضافة تأثيرات جذابة دون الحاجة إلى كتابة أكواد برمجية معقدة وفي هذا المقال ستتناول شرح CSS Animations بالتفصيل.
CSS Animations توفر طريقة مرنة وسلسة لتحريك النصوص والصور والقوائم أو أي عنصر آخر على صفحة الويب، سواء كنت تريد إضافة تأثيرات انتقالية بسيطة أو تصميم حركات متقدمة، فإن هذه التقنية تمنحك القدرة على تحقيق ذلك ببضع أسطر من التعليمات البرمجية.
في هذا المقال، سنتعرف على أساسيات الرسوم المتحركة في CSS بما في ذلك كيفية استخدام خاصية @Keyframes لتحديد الحركات، وكيفية تخصيص سرعة الحركة وتكرارها لتحسين جاذبية الموقع، كما سنتناول نصائح عملية وأمثلة تساعدك على الاستفادة القصوى من هذه التقنية لتحويل مواقعك إلى تجربة ممتعة وديناميكية.
ما هي الرسوم المتحركة Animations
الرسوم المتحركة في CSS هي تقنية تتيح لك إنشاء تأثيرات حركية على عناصر صفحة الويب، مما يجعل التصميم أكثر حيوية وتفاعلية بدلاً من أن تكون العناصر ثابتة يمكن تحريكها لتنتقل بين حالات مختلفة، مثل تغيير اللون والحجم والموضع أو حتى الدوران بطريقة سلسة وجذابة.
مكونات الرسوم المتحركة
1- الخاصية @keyframes: وهي العنصر المسؤول عن تحريك أي عنصر تريد تحريكه ولا يمكن الاستغناء عنها ويتم كتابتها كما يلي:@
;{ } keyframes theName@
2- خصائص الحركة Animation Properties: وهي مجموعة من الأدوات التي تتيح للمطورين إنشاء وتحكم الرسوم المتحركة على عناصر صفحات الويب بطريقة دقيقة وفعالة. تُستخدم هذه الخصائص لتحديد كيفية تنفيذ الحركة من حيث الاسم، المدة، السرعة، التأخير، التكرار، الاتجاه، والسلوك العام للرسوم المتحركة. توفر هذه الخصائص خيارات متعددة تسمح بابتكار تجارب مستخدم ديناميكية وجذابة دون الحاجة إلى استخدام JavaScript أو تقنيات برمجية معقدة.
إقرأ أيضاً: أخطاء يقع فيها المبرمج المبتدئ إحذر منها!
خصائص الحركة Animation Properties
تكتب خواص الحركة بداخل العنصر المراد تحريكه وليس بداخل الخاصية @keyframes، وهذه هي أشهر خصائص الحركة وأكثرها إستخداماً.
1. خاصية الإسم animation-name
تحدد اسم الرسوم المتحركة الذي يتم تعريفه باستخدام خاصية @keyframes.
2. خاصية الوقت animation-duration
animation-duration هي خاصية في CSS تستخدم لتحديد المدة الزمنية التي تستغرقها الرسوم المتحركة للانتقال من الحالة الأولية إلى الحالة النهائية.
تعتبر هذه الخاصية أساسية لضبط إيقاع الحركة والتحكم في استمراريتها، مما يساهم في تحسين تجربة المستخدم عن طريق توفير تأثيرات حركية سلسة ومتناسقة.
3. خاصية التأخير animation-delay
animation-delay هي خاصية في CSS تستخدم لتحديد فترة التأخير الزمنية قبل بدء تنفيذ الرسوم المتحركة على العنصر.
توفر هذه الخاصية تحكما أكبر في توقيت الرسوم المتحركة، مما يسمح بتنسيق أفضل بين الحركات المختلفة في الصفحة. تستخدم بشكل شائع لإنشاء تأثيرات متتالية على العناصر أو لتأخير بدء الحركات حتى تتزامن مع أحداث أو حالات محددة.
4. عدد التكرارات animation-iteration-count
animation-iteration-count هي خاصية في CSS تستخدم لتحديد عدد مرات تكرار الرسوم المتحركة على العنصر.
تتيح هذه الخاصية للمطورين التحكم في تكرار الرسوم المتحركة، مما يسمح بإنشاء تأثيرات مرئية مستمرة أو محددة المدة بناءً على تصميم واجهة المستخدم. تستخدم عادةً في التأثيرات الديناميكية مثل الحركات الدورية أو المؤشرات المستمرة.
5. خاصية ضبط الإتجاه animation-direction
animation-direction هي خاصية في CSS تستخدم لتحديد اتجاه تشغيل الرسوم المتحركة أثناء التكرار.
تساعد خاصية animation-direction في إنشاء تأثيرات متكررة أكثر ديناميكية وواقعية على سبيل المثال يمكن استخدامها لتصميم حركات متناوبة مثل التأرجح والدوران ذهاباً وإيابا أو التأثيرات العكسية، مما يجعل الرسوم المتحركة تبدو أكثر سلاسة وتنوعا.
6. خاصية animation-fill-mode
animation-fill-mode هي خاصية في CSS تستخدم لتحديد كيفية تطبيق الرسوم المتحركة على العنصر قبل بدء الحركة أو بعد انتهائها. تتحكم هذه الخاصية في حالة العنصر أثناء الفترات التي لا تكون فيها الرسوم المتحركة نشطة (قبل البدء أو بعد الانتهاء).
وتعد خاصية حيوية لتحسين مظهر العنصر عند استخدام الرسوم المتحركة، حيث تجنب الانتقال المفاجئ بين الحركات والحالات الثابتة.
7. خاصية animation
هي خاصية تجمع جميع خصائص الحركة السابقة في سطر واحد، مما يسهل كتابة التعليمات البرمجية ويجعلها أكثر تنظيمًا وكفاءة.
كل خاصية لها استخدام مختلف مثل animation-name هو كما واضح تقوم بتعيين إسم للعنصر، و animation-delay هو تأخير لوقت تشغيل العنصر وهكذا.
إقرأ أيضاً: كيفية إنشاء موقع إلكتروني من الصفر في 2022 الدليل الشامل
التطبيق والممارسة (كيف وأين؟)
الرسوم المتحركة في تطوير الويب بحرها واسع وبها الآلاف من الإبتكارات التي ينتجها المطورون يومياً، وأنت أيضاً بعد أن تتعلم الأساسيات سوف تكون قادراً على الإبتكار وصنع Animations مميزة.
ولكن هذا لن يحدث إلا بالممارسة المثيرة والمتابعة للأعمال المختلفة الخاصة ب المصممين للحصول على التغذية البصرية التي تمكنك من إبتكار اشياء مميزة.
سوف أرشح لك في هذا القسم كورسات (دورات تعليمية) على اليوتيوب لتعلم اساسيات التحريك في CSS والتطبيق العملي عليها أيضاً.
1- كورس مكون من 13 درس باللغة الإنجليزية على قناة The Net Ninja
2- كورس شامل لتعلم ال CSS3 على القناة العربية ElzeroWebSchool سوف تجد به دروس تتناول شرح التحريك بشكل مفصل
3- بعد أن تتعلم الأساسيات يأتي وقت الممارسة، وهنا دور هذه القائمة المكونة من عدة فيديوهات مختلفة لتحريكات متنوعة يمكنك تقليدها والتعديل عليها أيضاً.
إقرأ أيضاً: أفضل مواقع العمل الحر Freelance Websites
وهنا نأتي إلى نهاية هذا المقال والذي شرحنا فيه ما هي الرسوم المتحركة Animations في لغة ال CSS3، مع الأمثلة وترشيح أفضل المصادر لتعلمها والتطبيق والممارسة أيضاً، اتمنى ان تكون قد استفدت ويرجى مشاركة المقال على منصات التواصل الاجتماعي حتى تعم الفائدة، وبالتوفيق.
